const path = require("path");
//这是热更新的第二步
const webpack = require('webpack');
//这个配置文件，起始就是一个JS文件，通过node中模块操作，向外暴露一个配置对象
//导入内部中生成plugin插件
const htmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

//只要是插件就要放入到plugin 中
//html-webpack-plugin插件有两个作用：
//1、自动生成内存中指定页面生成的内存页面
//2、自动打包好的额bundle.js追加到页面中
module.exports = {
    //在配置文件中手动写入他们的入口和出口
    entry: path.join(__dirname, './src/main.js'), //入口，写入webpack打包的文件
    output: {
        path: path.join(__dirname, './dist'), //出口，打包好的问价输入那个目录
        filename: 'bundle.js' //目录中对应的文件
    },
    devServer: {
        //--open --contentBase src --hot
        //devServer命令参数的第二形式
        open: true, //自动打开浏览器
        port: 3000, //设置启动时的端口号
        //contentBase: 'src', //指定托管的根目录
        hot: true, //启用热更新第一步

    },
    //这是热更新的第三部
    plugins: [ //配置插件的节点
        new webpack.HotModuleReplacementPlugin(),
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'), //指定的模块路径，要生成的页面路径
            filename: 'index.html' //指定生成的页面名称
        }),
        new VueLoaderPlugin()

    ],
    module: { //这个文件配置第三方的加载器
        rules: [ //所有第三方模块的使用规则
            // 在1.x的webpack版本不要后面加-loader，但是后面的2.X之后的版本都要加-loader
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //第三方loader是规则
            //    配置处理less的第三方loader规则
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            // 配置处理scss的第三方loader规则
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            //配置url的第三方loader规则
            { test: /\.(jpg|png|jpeg|bmp|gif)$/, use: ['url-loader?limit=75428&name=[hash:8]-[name].[ext]'] },
            //在loader后面加？limit=图片字节数 如果大于图片的真正字节数（单位：byte），选择Base64编码，如果等或者
            // 小于的话选择非Base64编码,图片的前缀是数字表示，不用原来的图片前缀是防止重名
            // 后面再加&name=[name].[ext]表示引入的是什么名，你在浏览器显示的也是什么名
            // 防止不重复又显示原来的名字，可以在前面放个hash(总共32位)
            // url-loader?limit=7631&name=[hash:8]-[name].[ext]
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
            { test: /\.js$/, use: 'babel-loader', exclude: /node_module/ },
            //这是配置Babel转化ES6高级语法
            { test: /\.vue$/, use: 'vue-loader' }
        ]
    },
    resolve: {
        alias: {
            // "vue$": "vue/dist/vue.js"
        }
    }
}


//当我们webpack命令输出的时候，webpack做了什么事情
//1、首先webpack会发现，我们并没有通过命令的格式，给她指定的入口或是出口
//2、webpack回去项目的根目录查找一个叫做webpack.config.js的配置文件
//3、当配置文件后，webpack会解析执行这个配置文件，就得到了配置文件中导出的对象
//4、当我们的拿到配置对象后，根据指定的出口或是入口，然后进行打包构建